<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-loading="dialogInfo.btLoading"
    :bt-list="dialogInfo.btList"
  >
    <!-- 条件栏 -->
    <page-filter
      v-model:query="filterInfo.query"
      :filter-list="filterInfo.list"
    >
      <template v-slot:filter-faultClassifyId>
        <el-tree-select
          v-model="faultClassifyId"
          :data="treeInfo.data"
          check-strictly
          :render-after-expand="false"
          show-checkbox
        />
      </template>
      <template v-slot:filter-classifyTypeValue>
        <el-input
          v-model="filterInfo.query.classifyTypeValue"
          type="input"
          :disabled="true"
          placeholder="请选择资产分类"
        >
          <template #append>
            <el-icon @click="openAssetClassifyWindowFilter"
              ><MoreFilled
            /></el-icon>
          </template>
        </el-input>
      </template>
    </page-filter>
    <dialog-table
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="api"
      :listen-height="false"
      :query="filterInfo.query"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      :highlight-row="highlightRow"
      :check-box="checkBox"
      @handleEvent="handleEvent"
    />
    <SelectAssetClassify
      v-if="selectAssetClassifyInfoFilter.visible"
      v-model:showDialog="selectAssetClassifyInfoFilter.visible"
      :saveEmpty="true"
      :highlight-row="true"
      @callback="selectAssetClassifyInfoCallBackFilter"
    />
  </page-dialog>
</template>

<script setup name="SelectFault">
import PageDialog from "../PageDialog/index";
import PageFilter from "../PageFilter/index";
import { getFaultLibraryPage, getFaultClassifyTree } from "@/api/repair.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["update", "callback", "reset"]);
const props = defineProps({
  highlightRow: {
    type: Boolean,
    default: false,
  },
  checkBox: {
    type: Boolean,
    default: true,
  },
  api: {
    type: Function,
    default: getFaultLibraryPage,
  },
  showDialog: {
    type: Boolean,
  },
  saveEmpty: {
    type: Boolean,
    default: false,
  },
  query: {
    type: Object,
    default: function () {
      return {};
    },
  },
});
const treeInfo = ref({
  data: []
})
const faultClassifyId = ref('')
const selectAssetClassifyInfoFilter = reactive({
  visible: false,
  saveEmpty: true,
  query: {},
});
// 过滤相关配置
const filterInfo = reactive({
  query: {
    ...props.query,
    status: 1
    // classifyTypeMult: "",
    // classifyTypeValue: "",
  },
  list: [
    {
      type: "slot",
      label: "故障分类",
      clearable: true,
      value: "faultClassifyId",
      event: search,
    },
    {
      type: "slot",
      label: "资产分类",
      clearable: true,
      disabled: true,
      value: "classifyTypeValue",
      event: search,
    },
    {
      type: "select-model",
      code: "not_asset_repair_type",
      label: "维修类别",
      disabled: true,
      clearable: true,
      value: "notAssetRepairTypeMult",
      event: search,
    },
    {
      type: "input",
      label: "故障描述",
      clearable: true,
      value: "keyword",
      event: search,
    },
    { type: "button", label: "搜索", event: search },
  ],
});
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    { label: "故障编码", value: "faultLibraryNo" },
    { label: "故障描述", value: "faultDescribe" },
    { label: "引用次数", value: "useTimes" },
  ],
});
// 弹窗相关
const dialogInfo = reactive({
  title: "选择故障库",
  btLoading: false,
  btList: [
    { label: "关闭", event: handleClose, show: true },
    {
      label: "保存",
      type: "primary",
      disabled: !props.saveEmpty,
      event: save,
      show: true,
    },
  ],
});
const selectRow = ref("");
let shows = computed({
  get() {
    return props.showDialog;
  },
  set(newValue) {
    emit("update:showDialog", newValue); // 更新父组件shows
  },
});

watch(
  () => props.query.repairTypeMult,
  (val) => {
    console.log(val)
    // 1资产报修  2 非资产报修
    filterInfo.list.map((item) => {
      if (item.value == "classifyTypeValue") {
        item.show =( val == 1)
      }
      if (item.value == "notAssetRepairTypeMult") {
        item.show = (val == 2)
      }
    });
  },
  {
    deep: true,
    immediate: true,
  }
)

onMounted(() => {
  getFaultClassifyTree().then(res => {
    if (res.success) {
      treeInfo.value.data = getTree(res.data)
    }
  })
  proxy.$nextTick(() => {
    getList();
  });
});

function getTree(row) {
  if(row && row.length) {
    row.map(i => {
      i.label = i.name
      i.value = i.id
      if(i.children && i.children.length){
        getTree(i.children)
      }
    })
  }
  return row
}

// 获取列表
function getList() {
  filterInfo.query.faultClassifyId = faultClassifyId.value <= 0 ? "" : faultClassifyId.value
  tableInfo.refresh = Math.random();
}
function search() {
  filterInfo.query.faultClassifyId = faultClassifyId.value <= 0 ? "" : faultClassifyId.value
  tableInfo.initCurpage = Math.random();
  tableInfo.refresh = Math.random();
}
function save() {
  // emit('input', data)
  handleClose();
  emit("callback", selectRow.value);
}
function handleEvent(event, data) {
  switch (event) {
    case "tableClickRow":
      selectRow.value = data;
      if (!props.saveEmpty) {
        filterInfo.btList[1].disabled = !selectRow.value;
      }
      break;
    case "tableCheck":
      selectRow.value = data;
      if (!props.saveEmpty) {
        filterInfo.btList[1].disabled = !selectRow.value;
      }

      break;
  }
}
function selectAssetClassifyInfoCallBackFilter(row) {
  if (row) {
    filterInfo.query["classifyTypeMult"] = row.id;
    filterInfo.query["classifyTypeValue"] = row.name;
  } else {
    filterInfo.query["classifyTypeMult"] = -2;
    filterInfo.query["classifyTypeValue"] = "";
  }
  getList()
}
function openAssetClassifyWindowFilter() {
  // selectAssetClassifyInfoFilter.visible = true;
}
// 关闭弹窗前的回调
function handleClose() {
  shows.value = false;
  emit("reset");
}
</script>

<style scoped>
:deep(.el-dialog__body) {
  height: 355px;
  display: flex;
  flex-direction: column;
}
</style>
